<template>
  <div class="cate-container">
    <el-card>
      <el-button
        :style="btnStyle"
        style="margin-bottom: 15px"
        size="mini"
        icon="el-icon-plus"
        @click="addOrEditGoodsCateHandler(1)"
      >
        添加分类
      </el-button>
      <!-- 表格 -->
      <tree-table
        index-text="#"
        show-index
        border
        :data="goodsCateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
      >
        <!-- 是否有效插槽 -->
        <template slot="isOk" slot-scope="{ row }">
          <span
            class="el-icon-circle-check"
            v-if="!row.cat_deleted"
            :style="fontStyle"
          ></span>
          <span class="el-icon-circle-close" v-else></span>
        </template>
        <!-- 排序插槽 -->
        <template slot="order" slot-scope="{ row }">
          <el-tag size="small" v-show="row.cat_level === 0">一级</el-tag>
          <el-tag size="small" v-show="row.cat_level === 1" type="success">
            二级
          </el-tag>
          <el-tag size="small" v-show="row.cat_level === 2" type="info">
            三级
          </el-tag>
        </template>
        <!-- 操作插槽 -->
        <template slot="options" slot-scope="{ row }">
          <el-button
            size="mini"
            :style="btnStyle"
            icon="el-icon-edit"
            @click="addOrEditGoodsCateHandler(0, row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            :style="btnStyle"
            icon="el-icon-delete"
            @click="deleteGoodsCateHandler(row)"
          >
            删除
          </el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <my-pagination
        :params="params"
        :total="goodsCateListData.total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></my-pagination>
      <!-- 添加分类对话框 -->
      <el-dialog
        :title="title"
        :visible.sync="addOrEditCateDialogVisible"
        width="40%"
        :before-close="addOrEditCateDialogClose"
      >
        <el-form
          ref="addOrEditFormRef"
          :model="addOrEditCateForm"
          label-width="80px"
          :rules="addOrEditCateRules"
        >
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addOrEditCateForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类" v-if="title === '添加分类'">
            <el-cascader
              :options="options"
              :props="props"
              @change="selectCateLabelHandler"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="addOrEditCateDialogClose">取 消</el-button>
          <el-button :style="btnStyle" @click="addOrEditGoodsCateConfirmHandler"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
// 引入tree-table组件
import treeTable from 'vue-table-with-tree-grid'
export default {
  name: 'cate',
  data() {
    return {
      // 商品分类参数
      params: {
        type: '',
        pagenum: 1,
        pagesize: 5,
      },
      // tree-table配置项！！！
      columns: [
        {
          label: '分类名称', // 显示的文本
          prop: 'cat_name', // 对应的数据
        },
        {
          label: '是否有效',
          type: 'template', // 类型为模板列（插槽）
          template: 'isOk',
        },
        {
          label: '排序',
          type: 'template',
          template: 'order',
        },
        {
          label: '操作',
          type: 'template',
          template: 'options',
        },
      ],
      title: '', // 添加或编辑分类对话框标题
      addOrEditCateDialogVisible: false, // 添加或编辑分类对话框状态
      addOrEditGoodsCateParams: {}, // 添加或编辑分类参数
      // 添加或编辑分类表单对象
      addOrEditCateForm: {
        cat_name: '',
      },
      // 添加或编辑分类规则
      addOrEditCateRules: {
        cat_name: [
          { required: true, message: '请填写分类名称', trigger: 'blur' },
        ],
      },
      // 级联选择器配置
      props: { checkStrictly: true, label: 'cat_name', value: 'cat_id' },
      options: [], // 级联选择器数据
    }
  },
  computed: {
    ...mapGetters('goodsCate', ['goodsCateList']),
    ...mapState('goodsCate', ['goodsCateListData']),
  },
  methods: {
    ...mapActions('goodsCate', [
      'getGoodsCateList',
      'deleteGoodsCate',
      'addOrEditGoodsCate',
    ]),

    handleSizeChange(pagesize) {
      this.params.pagesize = pagesize
      this.getGoodsCateList(this.params)
    },
    handleCurrentChange(pagenum) {
      this.params.pagenum = pagenum
      this.getGoodsCateList(this.params)
    },
    // 删除商品分类
    async deleteGoodsCateHandler(cate) {
      try {
        await this.$messageBox.confirm('确定删除该商品分类吗？', '提示')
        try {
          await this.deleteGoodsCate(cate.cat_id)
          this.$message.success('删除成功')
          this.getGoodsCateList(this.params)
        } catch (error) {
          this.$message.error(error)
        }
      } catch (error) {
        this.$message.info('已取消删除')
      }
    },
    /**
     * 添加或编辑分类
     * type 1添加 0编辑
     */
    async addOrEditGoodsCateHandler(type, cate) {
      this.addOrEditCateDialogVisible = true
      try {
        if (type === 1) {
          this.title = '添加分类'
          this.options = await this.getGoodsCateList({ type: 2 })
        } else {
          this.title = '编辑分类'
          this.addOrEditCateForm = JSON.parse(JSON.stringify(cate))
          this.addOrEditGoodsCateParams = {
            id: cate.cat_id,
          }
        }
      } catch (error) {}
    },
    // 点击添加或编辑分类确定按钮回调
    addOrEditGoodsCateConfirmHandler() {
      this.$refs.addOrEditFormRef.validate(async v => {
        if (!v) return
        try {
          this.addOrEditGoodsCateParams.cat_name =
            this.addOrEditCateForm.cat_name
          await this.addOrEditGoodsCate(this.addOrEditGoodsCateParams)
          this.$message.success(this.title + '成功')
          this.addOrEditCateDialogClose()
          this.getGoodsCateList(this.params)
        } catch (error) {
          // this.$message.error(error)
        }
      })
      // this.addOrEditCateDialogVisible = false
    },
    // 选择商品分类回调 keys选中的分类id，以数组形式
    selectCateLabelHandler(keys) {
      // 没有选中分类，新增一级分类
      if (!keys.length) {
        this.addOrEditGoodsCateParams.cat_level = 0
        this.addOrEditGoodsCateParams.cat_pid = 0
      } else if (keys.length === 1) {
        // 选中一级分类，新增二级分类
        this.addOrEditGoodsCateParams.cat_level = 1
        this.addOrEditGoodsCateParams.cat_pid = keys[0]
      } else {
        // 选中二级分类，新增三级分类
        this.addOrEditGoodsCateParams.cat_level = 2
        this.addOrEditGoodsCateParams.cat_pid = keys[keys.length - 1]
      }
    },
    // 添加或编辑分类对话框关闭回调
    addOrEditCateDialogClose(done) {
      typeof done === 'function'
        ? done()
        : (this.addOrEditCateDialogVisible = false)
      this.addOrEditCateForm = {}
      this.$refs.addOrEditFormRef.resetFields()
    },
  },
  components: {
    'tree-table': treeTable,
  },
  mounted() {
    this.getGoodsCateList(this.params)

    this.$on('handleSizeChange', this.handleSizeChange)
    this.$on('handleCurrentChange', this.handleCurrentChange)
  },
}
</script>

<style></style>
